<div id="basic-handbook" v-cloak>
  <div purpose="handbook-template" style="max-width: 1080px;" class="container-fluid mb-5">
    <div class="d-flex flex-column justify-content-between flex-lg-row pt-lg-4 pb-lg-4 m-0">
      <div class="d-flex flex-column order-lg-last">
      <div purpose="right-sidebar" class="d-lg-block d-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
        <div purpose="maintainer" class="mb-lg-3">
          <h4>Maintained by:</h4>
          <img alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
          <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/edit/main/handbook/'+thisPage.sectionRelativeRepoPath" target="_blank"> Edit this page</a>
        </div>
        <div v-if="!isHandbookLandingPage">
          <h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
          <div purpose="subtopics">
            <ul class="p-0 m-0">
              <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
                <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-lg-3'" @click="forceRender()">{{subtopic.title}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="border-bottom py-3 d-flex d-md-none"></div>
      </div>
        <div purpose="sidebar-cta" class="d-none d-lg-block">
          <a href="/contact"  class="d-flex flex-row justify-content-start">
          <div class="d-flex align-self-start">
            <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
          </div>
          <div>
            <p class="mb-0">Questions?</p>
            <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
          </div>
          </a>
        </div>
    </div>

      <div class="d-flex flex-column handbook-content">

        <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
          <div purpose="page-breadcrumbs" class="d-flex flex-row align-items-center" v-if="breadcrumbs.length > 1">
            <a :href="'/' + breadcrumbs[0]" class="pr-3">
              {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
            </a>
            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" / v-if="breadcrumbs.length === 3">
            <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3" v-if="breadcrumbs.length === 3">
              {{_getTitleFromUrl(breadcrumbs[1])}}
            </a>
            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/ v-if="breadcrumbs.length > 1">
            <p purpose="current-page-breadcrumb" class="pl-3 m-0" v-if="breadcrumbs.length > 1">
              {{thisPage.title}}
            </p>
          </div>
          <div v-else>
            <strong>Introduction</strong>
          </div>
        </div>

        <div purpose="search" id="docsearch-query" class="d-flex">
          <div purpose="disabled-search" class="d-flex w-100">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text border-0 bg-transparent pl-3" >
                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
                </span>
              </div>
              <div class="form-control border-0 ">
              <input class="docsearch-input pr-1"
                placeholder="Search the handbook..." aria-label="Search the handbook"
                />
              </div>
            </div>
          </div>
        </div>

        <div purpose="right-sidebar" class="d-block d-lg-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
          <div purpose="maintainer" class="mb-lg-3">
            <h4>Maintained by:</h4>
            <img alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
            <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/tree/main/handbook/'+thisPage.sectionRelativeRepoPath" target="_blank"> Edit this page</a>
          </div>
          <div v-if="!isHandbookLandingPage">
            <h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
            <div purpose="subtopics">
              <ul class="p-0 m-0">
                <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
                  <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-lg-3'" @click="forceRender()">{{subtopic.title}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div>
            <a href="/contact" purpose="sidebar-cta" class="d-flex flex-row justify-content-start">
            <div class="d-flex align-self-start">
              <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
            </div>
            <div>
              <p class="mb-0">Questions?</p>
              <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
            </div>
            </a>
          </div>
          <div class="border-bottom py-3 d-flex d-md-none"></div>
        </div>

        <div purpose="content" id="body-content" class="content" parasails-has-no-page-script>
          <div :purpose="[isHandbookLandingPage ? 'handbook-landing-page' : thisPage.title ]" >
          <%- partial(
            path.relative(
              path.dirname(__filename),
              path.resolve(
                sails.config.appPath,
                path.join(
                  sails.config.builtStaticContent.compiledPagePartialsAppPath,
                  thisPage.htmlId
                )
              )
            )
          ) %>
          </div>
          <div v-if="isHandbookLandingPage">
            <div class="container-fluid d-flex flex-column p-0">
              <div v-for="page in handbookIndexLinks">
                <h3 class="mb-2"><a style="color: #000; text-decoration: none;" :href="page.url">{{page.pageTitle}}</a></h3>
                <p v-for="link in page.pageLinks">
                  <a :href="link.hashLink">{{link.headingText}}</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div purpose="back-to-top-button-container">
    <div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
      <p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
    </div>
  </div>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
